<template>
  <div
    ref="course-wrap"
    class="course-wrap"
    v-loading="loading"
    :style="{ height: wrapHeight + 'px' }"
  >
    <div v-if="addShow" class="new-course" title="新建" @click="handleAdd()">
      <span class="el-icon-plus color-danger"></span>
    </div>
    <el-checkbox-group v-model="checkList">
      <div class="course-wrap-item" v-for="v in tableData" :key="v.id">
        <!-- <el-checkbox
          :label="v.id"
          class="file-checkbox"
          @change="handleCheckboxChange"
        ></el-checkbox> -->
        <!-- <el-tooltip
          class="icon-file"
          content="点击下载审查表"
          placement="top"
          effect="dark"
          v-if="isShowFile(v)"
        >
          <span
            class="el-icon-paperclip"
            @click="downloadReviewTable(v)"
          ></span>
        </el-tooltip> -->
        <div class="img-box img-hover" @click="handleManage(v)">
          <div v-if="v.selection == 1" class="selection"> 优质 </div>
          <img :src="coverImg(v)" />
        </div>
        <div class="txt-box">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="txt-wrap">
                <p>
                  <b>{{ v.title }}</b>
                </p>
                <p>
                  <i>建设单位：</i>
                  <span>{{ deptNames(v) }}</span>
                </p>
                <!-- <p class="sheng">
                  <i>建设团队：</i>
                  <span :title="teamInfo(v)">{{ teamInfo(v) }}</span>
                </p> -->
                <!-- <p>
                  <i>{{ type > 3 ? '板块' : '元素库' }}类别：</i
                  >{{ $store.getters.libraryName }}
                </p> -->
                <p><i>创建时间：</i>{{ v.createTime }}</p>
              </div>
              <div class="btn-wrap">
                <Buttons :row="v" />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="txt-wrap">
                <p style="opacity: 0">1</p>

                <p>
                  <span v-show="v.status == 0 && v.auditStatus == 1">
                    <i>课程状态：</i>暂存</span
                  >
                  <span v-show="v.status == 1"><i>课程状态：</i>已上线</span>
                  <span v-show="v.status == 2"><i>课程状态：</i>待发布</span>
                </p>
                <p v-show="v.status == 0 && v.auditStatus != 1">
                  <i>审核状态：</i>
                  <span v-show="v.auditStatus == 4">待审核</span>
                  <span class="color-success" v-show="v.auditStatus == 2">
                    审核通过，待发布
                  </span>
                  <span class="color-danger" v-show="v.auditStatus == 3">
                    审核未通过
                  </span>
                </p>
                <!-- <p style="height: 30px">
                  <FileCountPro :data="v.sysKnowledgeFilesVO" />
                </p> -->
                <!-- <LookDown txtShow :count="v.evaluateVO" size="5" /> -->
              </div>
              <div class="btn-wrap">
                <template v-for="(btn, idx) in manageBtns">
                  <el-button
                    :key="btn"
                    v-if="$button(btn) && type == idx + 1"
                    type="custom"
                    size="mini"
                    @click="handleManage(v)"
                  >
                    进入管理
                  </el-button>
                </template>
                
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-checkbox-group>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
    <Audit />
    <Recommend />
    <PushReview />
  </div>
</template>
<script>
import { sysCourseQuery } from '@/api/admin/courseLibrary/sysCourse.js'
import Bus from '@/utils/bus.js'
import webinfo from '@/mixins/webinfo.js'
import setInfo from '@/mixins/setInfo.js'
import courseCreate from '@/mixins/courseCreate'
import download from '@/mixins/download'
export default {
  mixins: [webinfo, setInfo, courseCreate, download],
  components: {
    Buttons: () => import('./Buttons.vue'),
    LookDown: () => import('@/components/home/lookDown.vue'),
    Audit: () => import('./Audit.vue'),
    Recommend: () => import('./Recommend.vue'),
    PushReview: () => import('./PushReview.vue'),
    FileCountPro: () => import('@/components/home/fileCountPro.vue'),
  },
  data() {
    return {
      checkList: [],
      wrapHeight: 500,
      loading: false,
      type: this.$store.getters.libraryType,
      manageBtns: [836, 837, 838, 839, 840, 841],
      viewFlowBtns: [842, 843, 844, 845, 846, 847],
      pushReview: [848, 849, 850, 851, 852, 853],
      listQuery: {
        courseType: this.$store.getters.libraryType,
        page: 1,
        limit: 10,
        sourceType: '1',
      },
      tableData: [],
      pageObj: {},
      addShow: false,
    }
  },
  props: ['sourceType'],
  computed: {
    deptNames() {
      return (v) => {
        if (v.sourceType == 2 && v.extFiled2) {
          //校外资源前端显示资源建设单位
          return v.extFiled2
        } else if (v.tbSysDept) {
          let dep = v.tbSysDept.deptFullnamepath.split('/')
          if (dep.length >= 3) {
            return dep[2]
          } else {
            return '陆军工程大学'
          }
        } else {
          return '陆军工程大学'
        }
      }
    },
    //是否显示审查表图标
    isShowFile() {
      return (v) => {
        let reviewTable = v.sysCourseFiles.filter((m) => m.type == 11)
        return reviewTable.length > 0
      }
    },
  },
  watch: {
    sourceType(v) {
      this.listQuery.page = 1
      this.getList()
    },
    $route() {
      this.getList()
    },
  },
  mounted() {
    window.onresize = () => {
      this.init()
    }
    this.$store.commit('SETCURCOURSE')
    this.$store.commit('SETKNOLEDGE')
    this.$nextTick(() => {
      this.getList()
    })
    Bus.$on('refreshCourseList', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList()
    })
    Bus.$on('checkAllChange', (flag) => {
      if (flag) {
        //全选
        this.tableData.forEach((v) => {
          if (!this.checkList.includes(v.id)) {
            this.checkList.push(v.id)
          }
        })
      } else {
        //取消全选
        this.checkList = []
      }
      this.$bus.$emit('sendSelectData', this.checkList)
    })
  },
  beforeDestroy() {
    Bus.$off('refreshCourseList')
    Bus.$off('checkAllChange')
  },
  methods: {
    getList() {
      this.loading = true
      this.tableData = []
      this.type = this.$store.getters.libraryType
      this.listQuery.courseType = this.$route.meta.type
      let listQuery = this.getSession('listQuery')
      if (listQuery) {
        let { courseType, page, limit } = JSON.parse(listQuery)
        if (courseType == this.listQuery.courseType) {
          this.listQuery.page = page || 1
          this.listQuery.limit = limit || 10
          this.removeSession('listQuery')
        }
      }
      if (this.showCourseType) {
        this.listQuery.sourceType = this.sourceType || 1
        if (this.listQuery.sourceType == 1) {
          this.listQuery.title = ''
        } else {
          this.listQuery.code = ''
        }
      } else {
        delete this.listQuery.sourceType
      }
      sysCourseQuery(this.listQuery).then((res) => {
        setTimeout(() => {
          this.tableData = res.data.data
          this.addShow = this.tableData.length == 0
          this.pageObj = res.data
          this.init()
          this.loading = false
        }, 200)
      })
    },
    //管理
    handleManage(row) {
      let btn = this.manageBtns[this.type - 1]
      let permission = this.$button(btn)
      if (!permission) return
      let { libraryEnName } = this.$store.getters
      this.$store.commit('SETCURCOURSE', row)
      this.$router.push({ name: libraryEnName + '-info' })
      this.setSession('listQuery', JSON.stringify(this.listQuery))
    },
    //查看审核流程
    handleLookFlow(row) {
      let { libraryEnName } = this.$store.getters
      this.$store.commit('SETCURCOURSE', row)
      this.$router.push({ name: libraryEnName + '-other' })
    },
    //推送评审活动
    handlePushReview(row) {
      Bus.$emit('showDialogPushReview', row)
    },
    //编辑
    handleEdit(row) {
      Bus.$emit('showDialogCourseAdd', row)
    },
    handleAdd() {
      Bus.$emit('showDialogCourseAdd')
    },
    init() {
      let wHeight = document.body.clientHeight
      if (!this.$refs['course-wrap']) return
      let topDistance = this.$refs['course-wrap'].getBoundingClientRect().top
      this.wrapHeight = wHeight - topDistance - 45
    },
    //下载审查表
    downloadReviewTable(v) {
      let fileList = v.sysCourseFiles.filter((m) => m.type == 11)
      if (!fileList.length) return
      this.download(fileList)
    },
    handleCheckboxChange() {
      this.$bus.$emit('sendSelectData', this.checkList)
    },
  },
}
</script>
<style scoped lang="scss">
.cover-img {
  display: block;
  width: 40px;
  height: 30px;
}
.course-wrap {
  width: 100%;
  height: 680px;
  overflow-y: scroll;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 30px;
  border-top: 1px solid #eee;

  .new-course {
    width: 500px;
    height: 300px;
    text-align: center;
    line-height: 350px;
    background-color: #f5f5f5;
    margin-top: 20px;
    cursor: pointer;
    span {
      font-size: 108px;
    }
  }
  .course-wrap-item {
    margin-top: -1px;
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #eee;
    // height: 180px;
    overflow: hidden;
    background: #f5f7fa;
    box-shadow: 0 0 6px #ddd;
    &.selected {
      background-color: #f2faff;
      .file-checkbox {
        display: block;
      }
    }
    .file-checkbox {
      position: absolute;
      right: 20px;
      top: 20px;
      // display: none;
      width: 35px;
      height: 35px;
      background: #fff;
      border-radius: 3px;
      box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
      z-index: 9;
      text-align: center;
    }
    .icon-file {
      position: absolute;
      right: 60px;
      top: 30px;
      font-size: 20px;
      color: #999;
      cursor: pointer;
      z-index: 9;
      &:hover {
        color: var(--colorA1);
      }
    }
    .img-box {
      position: absolute;
      left: 20px;
      top: 20px;
      border: 1px solid #eee;
      width: 240px;
      height: 180px;
      .selection {
        position: absolute;
        left: 0;
        top: 10px;
        color: #fff;
        z-index: 9;
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-indent: 10px;
        background: url('~@/assets/icon02.png') no-repeat center;
        background-size: contain;
        font-size: 12px;
      }
    }
    .txt-box {
      width: 100%;
      height: 180px;
      padding-left: 260px;
      box-sizing: border-box;
      .txt-wrap {
        height: 150px;
        p {
          color: #333;
          line-height: 30px;
        }
        b {
          font-size: 16px;
          position: relative;
          padding-left: 12px;
          color: var(--colorA1);
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 3px;
            width: 4px;
            height: 16px;
            border-radius: 1px;
            background-color: var(--colorA1);
          }
        }
        i {
          position: relative;
          padding-left: 12px;
          font-weight: bold;
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: var(--colorA1);
          }
        }
      }
    }
  }
}
</style>
<style scoped>
.file-checkbox >>> .el-checkbox__label {
  display: none;
}
.el-checkbox-group p {
  font-size: 14px;
}
</style>